<template>
  <h1 ref="title">App</h1>
  <p>{{ count }}</p>
  <button @click="handleClick">按钮</button>
  <p>{{ person.name }}</p>
  <p>{{ times }}</p>
  <Child :count="count" @setCount="handleClick" />
</template>

<script lang="ts" setup>
// 在script标签上写setup，启用setup语法糖
// 特点1：自动注册组件
import Child from "./views/Child/index.vue";
import { ref, reactive, computed, watch, onMounted } from "vue";

// 特点2：自动暴露
const count = ref(0);
const title = ref();

onMounted(() => {
  console.log(title.value);
});

const handleClick = () => {
  count.value++;
};

const times = computed(() => {
  return count.value + "次";
});

const person = reactive({
  name: "jack",
});
</script>

<style scoped></style>
